<div class="row">
  <div class="col-4 offset-4">
    <form id="form-reg">
      <div class="card text-center">
        <div class="card-header">
          请填写用户资料
        </div>
        <div class="card-body">
          <!-- 用户名 -->
          <div class="mb-3 row">
            <label for="username" class="col-sm-3 col-form-label text-end">用户名</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="input-user-name" name="userName">
            </div>
          </div>

          <!-- 手机号 -->
          <div class="mb-3 row">
            <label for="phone" class="col-sm-3 col-form-label text-end">手机号</label>
            <div class="col-sm-8">
              <input type="tel" class="form-control" id="input-reg-phone" name="phone">
            </div>
          </div>

          <!-- 密码 -->
          <div class="mb-3 row">
            <label for="password" class="col-sm-3 col-form-label text-end">密码</label>
            <div class="col-sm-8">
              <input type="password" class="form-control" id="input-reg-password" name="password">
            </div>
          </div>

          <!-- 二次密码 -->
          <div class="mb-3 row">
            <label for="confirmPassword" class="col-sm-3 col-form-label text-end">二次密码</label>
            <div class="col-sm-8">
              <input type="password" class="form-control" id="input-second-password" name="secondPassword">
            </div>
          </div>
        </div>
        <div class="card-footer text-muted">
          <button type="button"  id="btn-reg-sumbit"  class="btn btn-primary">提交</button>
          <button type="reset"  id="btn-reg-reset" class="btn btn-outline-secondary">重置</button>
        </div>
      </div>
    </form>
  </div>
</div>
@section Customscript {
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation/dist/additional-methods.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.extension.js"></script>
<script>
    var validator;
    const handleReset=()=>{
     validator.cleanForm();
    }
    const handleReg=()=>{
        if(!validator.valid()){
            customAlert({
                code:500,
                message:"数据填写有误，请更正"
            })
            return;
        }
        let data={
            phone:$("input-reg-phone").val(),
            password:$("input-reg-password").val(),
            userName:$("input-reg-name").val(),
        }
        $.ajax({
            type: "post",
            url: "identity/text/user",
            data: data,
            dataType: "dataType",
            success: function (response) {
                customAlert(response);
            }
        });
    }
   $(document).ready(function() {
    validator =$("#form-reg").validate({
        rules:{
            uuerName:{
                required:true,
                pattern:/^(?:[\u4e00-\u9fa5·]{2,16})$/
            },
        phone:{
            required:true,
                pattern:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        },
        password:{
            required:true,
            minlength:4
        },
        secondPassword:{
            required:true,
            equaTo:"#input-reg-password"
        },
        },
        message:{}
    });
})

 $(document).ready(function () {
    $("#btn-reg-sumbit").on("click",handleReg);
    $("#btn-reg-reset").on("click",handleReset);
 });
</script>
}